<!-- 表单的筛选 -->
<template>
  <el-row type="flex" justify="start" align="middle">
    <p v-if="showTitle && title" class="mr-2">{{ title }}:</p>
    <el-select
      v-model="data"
      :placeholder="'请选择' + title"
      @change="change"
      @clear="clear"
      :multiple="multiple"
      clearable
      :filterable="filterable"
    >
      <template v-for="item in options" :key="item[valueKey]">
        <el-option
          :value="item[valueKey]"
          :label="item[labelKey]"        
        ></el-option>
      </template>
    </el-select>
  </el-row>
</template>


<script lang="ts">
import { defineComponent ,ref } from 'vue'
import { optionsApi } from "@/manager-core/api/select/select";

// import { AppHeader,AppAside,AppTabs,AppNav,AppPageHeader } from "./impl"


export default defineComponent({
  name: 'BaseSelect',
  components: {
  },
  props:{
    // 是否显示标题
    showTitle:{
      type: Boolean,
      default: false,
      required: false
    },

    // 标题名
    title:{
      type: String,
      default: "",
      required: false
    },

    // server 可配置，组件会请求改server
    serverUrl:{
      type: String,
      default: null,
      required: false
    },

    // 服务器搜索参数
    serverParams:{
      type: Object,
      default: null,
      required: false
    },

    // value key
    valueKey:{
      type: String,
      default: "value",
      required: false
    },

    // label key
    labelKey:{
      type: String,
      default: "title",
      required: false
    },

    // options 可直接配置内容   
    dataOptions:{
      type: Array,
      default: [],
      required: false
    },

    // 自动初始化
    autoInit:{
      type:Boolean,
      default: true,
      required: false
    },

    
    filterable:{
      type: Boolean,
      default: true
    },

    // page mode
    pageMode: {
      type: Boolean,
      default: false
    },

    multiple: {
      type: Boolean,
      default: false
    }

  },
  data(){
    return {
      loading : false,
      data: null,
      options: [] as any
    }
  },

  methods:{

    init(suc?:any) {

      let succ = suc;

      // console.log("base select init",succ)

      if(this.loading){
        return;
      }

      this.loading = true;

      // 如果有dataoption
      if(this.dataOptions.length > 0){
        
        // console.log("base select init > 0")

        this.options = this.dataOptions;
        this.loading = false;
        
        if(suc){
          suc();
        }
        
        return 
      }

      if(this.serverUrl){

        // console.log("base select serverUrl")

        let data:any = {};


        let sp = this.serverParams;
        // console.log("sp",sp)

        if(this.serverParams){
          for (let i = 0; i < this.serverParams.length; i++) {
            const element = this.serverParams[i];
            data[element["k"]] = element["v"];
          }
        }

        optionsApi(this.serverUrl,data)
          .then((r:any)=>{
            console.log("options api ", r,this.pageMode)
            if(this.pageMode){
                this.options = r.records;
            } 
            else {
                this.options = r;
            }
            
            // console.log("base select options",this.options)            
          })
          .finally(()=>{
            this.loading = false;
            // console.log("base select finally",this.options,succ)

            if(succ){

              // console.log("base select suc",this.options)

              succ();
            }
          })
        return;
      }

      else {
        // console.log("select component has not options data");
        this.loading = false;
        if(suc){
          suc();
        }
      }      
    },

    setData(val:any){
      // console.log("base select set data",val)
      this.init(()=>{
        
        // console.log("base select set dat",this.options)

        this.data = val;
      })
    },

    change(val:any){

    },

    clear() {
      this.data = null;
    }

  },

  watch: {
    "data": function(oldval:any,newval:any){
      // console.log("base data is changed", this.data)
      this.$emit("onDataChanged",this.data);
    }
  },

  created() {},

  mounted(){
    if(this.autoInit){
      this.init();
    }

  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>



</style>
